$name: #{'.' + $namespace + '-tab' };

#{$name} {
  position: relative;
  border-radius: 10rpx;
  padding: 4rpx;

  &::before {
    content: '';
    position: absolute;
    @include locate();
    background: var(--info-stroke-color);
    opacity: .3;
    border-radius: inherit;
  }

  &__scroll,
  .uni-scroll-view,
  .uni-scroll-view-content {
    border-radius: inherit;
  }

  &__wrapper {
    transition: transform .3s linear;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tab-item-width);
    height: var(--tab-item-height);
    border-radius: inherit;
    background: var(--primary-background-color);
  }

  &__content {
    position: relative;
  }

  &-item {
    padding: 8rpx 32rpx;
    color: var(--primary-shadow-color);

    &.is-active {
      color: var(--primary-stroke-color);
    }

    &.is-disabled {
      color: var(--disabled-text-color);
    }
  }

  &--x {
    width: var(--tab-size);

    #{$name}__wrapper {
      transform: translateX(var(--tab-wrapper-position));
    }

    #{$name}__content {
      display: flex;
      align-items: center;
      width: fit-content;
    }

    &.is-fill-up {
      &, #{$name}__content {
        width: 100%;
      }
    }
  }

  &--y {
    #{$name}__wrapper {
      transform: translateY(var(--tab-wrapper-position));
    }
    
    #{$name}-item {
      display: flex;
      justify-content: center;
    }

    &.is-fill-up {
      &, #{$name}__content {
        height: 100%;
      }
    }
  }

  &.is-fill-up {
    #{$name}-item {
      flex-shrink: 0;
      flex-basis: 0;
      flex-grow: 1;
      display: flex;
      justify-content: center;
    }
  }
}